.foxui-videos-manager__body {
    border-bottom: $--border-base;

    .foxui-videos-content {
        border-bottom: $--border-base;
    }
}

.foxui-videos-manager__choose-video {
    .video-content {
        padding-bottom: 12px;

        .video-header {
            padding: $--padding-medium;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .add-video-btn {
                button {
                    margin-right: $--padding-small;
                }

                .info {
                    color: $--color-text-secondary;
                }
            }

            .search-input {
                display: flex;
                align-items: center;

                .foxui-picker {
                    width: 160px;
                }

                .horizontal-line {
                    width: $--padding-small;
                    height: 1px;
                    margin: 0 $--padding-extra-small;
                    background-color: $--border-color-base;
                }

                .search {
                    margin-left: $--padding-base;
                }
            }
        }

        .video-list {
            padding: 0 $--padding-medium;

            .foxui-row {
                height: 383px;
                overflow: auto;
            }

            .column-5 {
                width: 20%;
                flex: 0 0 auto;
            }

            .video {
                width: 100%;
                height: 0;
                padding-bottom: 75%;
                overflow: hidden;
                position: relative;
                cursor: pointer;
                background-color: #000;

                &::after {
                    content: '\e85a';
                    font-family: 'foxuifont';
                    font-size: $--font-size-extra-large * 1.6;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: $--color-primary-light-2;
                    z-index: 1;
                    opacity: 0;
                    transition: 0.3s;
                }

                &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.7);
                    z-index: 1;
                    opacity: 0;
                    transition: 0.3s;
                }

                &.is-active {
                    &::after {
                        opacity: 1;
                    }

                    &::before {
                        opacity: 1;
                    }
                }

                img {
                    position: absolute;
                    width: 100%;
                    // height: 75%;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }

                i {
                    position: absolute;
                    z-index: 1;
                    font-size: 24px;
                    top: -2px;
                    right: -2px;
                    color: #909090;
                    display: none;

                    &::after {
                        content: '';
                        display: inline-block;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 18px;
                        height: 18px;
                        background-color: #fff;
                        border-radius: 100%;
                        z-index: -1;
                    }
                }

                .duration {
                    position: absolute;
                    right: 6px;
                    bottom: 2px;
                    color: #f0f0f0;
                    font-size: 12px;
                }
            }

            .text {
                @include ellipsis-row();
                height: 34px;
                margin-top: $--padding-small;
            }
        }

        .video-footer {
            margin-top: $--padding-base;
        }
    }
}

.foxui-videos-manager__network-video {
    .videos-content {
        height: 499px;
        overflow: hidden;

        .video-header {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;

            .foxui-input-group {
                margin-bottom: 0;

                input {
                    flex: 1;
                    border-radius: 4px 0 0 4px;
                }

                button {
                    border-radius: 0 4px 4px 0;
                }
            }

            p {
                padding-left: 80px;
                color: $--color-text-secondary;
                margin-top: 4px;
            }
        }

        .video-preview {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            height: 380px;
            margin-top: 10px;
            background-color: #000;
            position: relative;

            .video-placeholder {
                background-color: #f4f6f8;
                width: 100%;
                height: 100%;
                position: relative;

                .info {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            video {
                max-width: 800px;
                max-height: 380px;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

// 修正样式
.foxui-dialog {
    &.videos-manager {
        .foxui-dialog__title {
            span {
                font-size: $--font-size-base;
                color: $--color-text-secondary;
                margin-left: $--padding-medium;
            }
        }

        .foxui-dialog__body {
            padding: 0 0 10px 0;
        }

        .foxui-tabs-content {
            padding: 0;
        }
    }
}
